import React, { Suspense } from 'react'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
import routerlist from './router'
import { RouterList, RouterItem } from '../utils/index'
type Props = {}

const RouterViwe = (props: Props) => {
  const Router = (arr: RouterList) => {
    return (
      arr &&
      arr.map((item: RouterItem, index: number) => {
        return (
          <Route
            path={item.path}
            key={index}
            element={item.to ? <Navigate to={item.to}></Navigate> : <item.element></item.element>}
          >
            {item.children && Router(item.children)}
          </Route>
        )
      })
    )
  }
  return (
    <Suspense fallback={<div>...加载中</div>}>
      <BrowserRouter>
        <Routes>{Router(routerlist)}</Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default RouterViwe
